<!--
 * @Author: your name
 * @Date: 2022-01-09 08:54:25
 * @LastEditTime: 2022-01-09 11:43:13
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homepage\src\components\footer.vue
-->

<template>
  <div>
    <div class="footer">
      <!-- 版心 -->
      <div class="area">
        <div class="introduce">
          <ul>
            <li><h4>介绍</h4></li>
            <li><a href="#">共同打造上亿"旅行神器"</a></li>
            <li>
              <a href="#"><span>6000</span> 个旅行地</a>
            </li>
            <li>
              <a href="#"><span>6000</span> 多种新的玩法</a>
            </li>
            <li>
              <a href="#"><span>6000</span> 次攻略下载</a>
            </li>
          </ul>
        </div>
        <div class="above">
          <ul>
            <li><h4>关于我们</h4></li>
            <li><a href="#">隐私政策 商标声明</a></li>
            <li><a href="#">服务协议 游记协议</a></li>
            <li><a href="#">网络平台服务</a></li>
            <li><a href="#">入站人员须知</a></li>
          </ul>
        </div>
        <div class="travel">
          <ul>
            <li><h4>旅行服务</h4></li>
            <li><a href="#">入站人员须知</a></li>
            <li><a href="#">旅行特价 火车订阅</a></li>
            <li><a href="#">旅行指南 飞机订阅</a></li>
            <li><a href="#">旅行咨询 卫星订阅</a></li>
          </ul>
        </div>
        <div class="QRcode">
          <img src="../assets/code.png" alt="" width="100px" />
          <br />
          <span class="footerSpan">关注我们</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>




<style lang="less" scoped>
.footer {
  a {
    text-decoration: none;
    color: #fff;
  }
}
.footerSpan {
  margin-left: 20px;
  margin-bottom: 10px;
  color: aliceblue;
}
.introduce {
  span {
    color: coral;
  }
}
li {
  font-size: 14px;
  list-style: none;
}
.footer {
  height: 165px;
  background-color: #333335;

  position: fixed;
  z-index: 999;

  bottom: 0px;
  width: 100%;
  right: 0;
  // margin-top: -5px;
}
.area {
  color: aliceblue;
  display: flex;
  margin: 0 auto;
  width: 1000px;
  /* background-color: rgb(59, 151, 204); */
  height: 100%;
  justify-content: space-around;
}

.QRcode {
  margin-top: 40px;
}
</style>